<template>
  <div>
    <el-form
      class='main-form'
      ref='elForm'
      :model='formData'
      :rules='rules'
      size='medium'
      label-width='100px'
      label-position='right'
    >
      <el-row gutter='15'>
        <el-col :span='12'>
          <el-form-item label='提交1' prop='commit1'>
            <el-input
              v-model='formData.commit1'
              placeholder='请输入commit'
              :maxlength='128'
              show-word-limit
              clearable
              prefix-icon='el-icon-finished'
              :style='{ width:"100%"}'
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label='项目1' prop='project1'>
            <el-cascader
              v-model='formData.project1'
              :options='project1Options'
              :props='project1Props'
              :style='{ width: "100%" }'
              placeholder='请选择级联选择'
              clearable
            >
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label='提交2' prop='commit2'>
            <el-input
              v-model='formData.commit2'
              placeholder='请输入commit'
              :maxlength='128'
              show-word-limit
              clearable
              prefix-icon='el-icon-finished'
              :style='{ width: "100%" }'
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label='项目2' prop='project2'>
            <el-cascader
              v-model='formData.project2'
              :options='project1Options'
              :props='project1Props'
              :style='{ width: "100%" }'
              placeholder='请选择级联选择'
              clearable
            >
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label='提交3' prop='commit3'>
            <el-input
              v-model='formData.commit3'
              placeholder='请输入commit'
              :maxlength='128'
              show-word-limit
              clearable
              prefix-icon='el-icon-finished'
              :style='{ width: "100%" }'
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label='项目3' prop='project3'>
            <el-cascader
              v-model='formData.project3'
              :options='project1Options'
              :props='project1Props'
              :style='{ width: "100%" }'
              placeholder='请选择级联选择'
              clearable
            >
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label='提交4' prop='commit4'>
            <el-input
              v-model='formData.commit4'
              placeholder='请输入commit'
              :maxlength='128'
              show-word-limit
              clearable
              prefix-icon='el-icon-finished'
              :style='{ width: "100%" }'
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label='项目4' prop='project4'>
            <el-cascader
              v-model='formData.project4'
              :options='project1Options'
              :props='project1Props'
              :style='{ width: "100%" }'
              placeholder='请选择级联选择'
              clearable
            >
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label='提交5' prop='commit5'>
            <el-input
              v-model='formData.commit5'
              placeholder='请输入commit'
              :maxlength='128'
              show-word-limit
              clearable
              prefix-icon='el-icon-finished'
              :style='{ width: "100%" }'
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='12'>
          <el-form-item label='项目5' prop='project5'>
            <el-cascader
              v-model='formData.project5'
              :options='project1Options'
              :props='project1Props'
              :style='{ width: "100%" }'
              placeholder='请选择级联选择'
              clearable
            >
            </el-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item size='large'>
        <el-button type='primary' @click='submitForm'>提交</el-button>
        <el-button @click='resetForm'>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import * as api from './api'
import { Message } from 'element-ui'
export default {
  name: 'push',
  components: {},
  props: [],
  data () {
    return {
      formData: {
        commit1: '',
        project1: undefined,
        commit2: '',
        project2: undefined,
        commit3: '',
        project3: undefined,
        commit4: '',
        project4: undefined,
        commit5: '',
        project5: undefined,
        submit: undefined
      },
      rules: {
        commit1: [
          {
            required: true,
            message: '请输入commit',
            trigger: 'blur'
          }
        ],
        project1: [
          {
            required: true,
            message: '请选择推送项目',
            trigger: 'change'
          }
        ],
        commit2: [],
        project2: [],
        commit3: [],
        project3: [],
        commit4: [],
        project4: [],
        commit5: [],
        project5: []
      },
      project1Options: [
        {
          id: 'zqqs',
          name: '债权清收',
          child: [
            {
              id: 'venus',
              name: 'venus'
            },
            {
              id: 'saturn',
              name: 'saturn'
            },
            {
              id: 'mimas',
              name: 'mimas'
            },
            {
              id: 'coconut',
              name: 'coconut'
            },
            {
              id: 'deimos',
              name: 'deimos'
            },
            {
              id: 'jackfruit',
              name: 'jackfruit'
            },
            {
              id: 'jupiter',
              name: 'jupiter'
            },
            {
              id: 'mango',
              name: 'mango'
            },
            {
              id: 'phobos',
              name: 'phobos'
            }
          ]
        },
        {
          id: 'public',
          name: '公共',
          child: [
            {
              id: 'iris',
              name: 'iris'
            },
            {
              id: 'ceres',
              name: 'ceres'
            },
            {
              id: 'lemon',
              name: 'lemon'
            },
            {
              id: 'durian',
              name: 'durian'
            },
            {
              id: 'spider',
              name: 'spider'
            },
            {
              id: 'pine',
              name: 'pine'
            },
            {
              id: 'uranus',
              name: 'uranus'
            }
          ]
        },
        {
          id: 'csxt',
          name: '催收系统',
          child: [
            {
              id: 'forest',
              name: 'forest'
            },
            {
              id: 'glacier',
              name: 'glacier'
            },
            {
              id: 'hail',
              name: 'hail'
            },
            {
              id: 'lake',
              name: 'lake'
            },
            {
              id: 'mountain',
              name: 'mountain'
            },
            {
              id: 'rainbow',
              name: 'rainbow'
            },
            {
              id: 'yellowbee',
              name: 'yellowbee'
            }
          ]
        },
        {
          id: 'bibb',
          name: '报表系统',
          child: [
            {
              id: 'drone',
              name: 'drone'
            },
            {
              id: 'glacier',
              name: 'glacier'
            },
            {
              id: 'qbee',
              name: 'qbee'
            },
            {
              id: 'zhive',
              name: 'zhive'
            },
            {
              id: 'bee',
              name: 'bee'
            },
            {
              id: 'tomato',
              name: 'tomato'
            },
            {
              id: 'tomatovine',
              name: 'tomatovine'
            }
          ]
        }
      ],

      project1Props: {
        multiple: false,
        value: 'id',
        label: 'name',
        children: 'child'
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    submitForm () {
      this.$refs.elForm.validate((valid) => {
        if (!valid) return
        // TODO 提交表单
        api.pushCode(this.formData).then((response) => {
          if (response.code === 2000) {
            Message.success('代码推送成功：' + response.data)
          } else {
            Message.error('代码推送失败：' + response.data)
          }
        })
      })
    },
    resetForm () {
      this.$refs.elForm.resetFields()
    }
  }
}
</script>
<style>
.main-form {
  margin: 20px 20px 20px 0px;
  padding: 50px 20px 20px 0px;
  background: #fff;
}
</style>
